<template>
	<div>
		<div class="header">
			<div class="header-main">
				<!-- <img
          src="../assets/index/logo1.png"
          alt=""
          class="header-main-logo"
        /> -->
				<div style="display: flex;">
					<img src="../assets/index/logo3.png" style="width: 4.7rem; padding: 0.5rem 1.9rem 0 0.2rem;" alt="" />
					<img src="../assets/index/logo2.png" style="margin-top: 2.3rem;" alt="" />
					<!-- <span>山东省地矿业务应用系统</span> -->
				</div>
				<div class="header-main-user">
					<div style="display: flex;" v-if="!isLogin">
						<div style="font-size: 1.5rem; width: 2rem;" @click="messageList">
							<el-badge :value="value" :max="99" class="item"><i class="el-icon-bell"></i></el-badge>
						</div>
						<div style="display: flex;justify-content: center;align-items: center;">
							<el-image style="width: 2rem; height: 2rem;border-radius: 50%;margin: 0 0.5rem;" :src="urlImg" :preview-src-list="urlImg.split(',')"></el-image>
							<el-dropdown>
								<span class="el-dropdown-link">
									{{ userName }}
									<i class="el-icon-caret-bottom"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item icon="el-icon-user" @click.native="userInfo">个人中心</el-dropdown-item>
									<el-dropdown-item icon="el-icon-switch-button" @click.native="logout">退出账号</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
					<div class="header-main-user-out" v-else>
						<div @click="logo">
							<!-- <i class="el-icon-s-custom" style="color: #146AC1; "></i> -->
							<span style="margin-left: 0.2rem;font-weight: bold;">登录</span>
						</div>
						<div style="width: 2px; height: 1rem; background-color: #000000; margin: 0.5rem; padding: 2px 0;"></div>
						<div @click="registerUser">
							<!-- <i class="el-icon-s-promotion" style="color: #146AC1; "></i> -->
							<span style="margin-left: 0.2rem;font-weight: bold;">注册</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- #146AC1 -->
		<div style="width: 100%; background: #146ac1;height: 3.7rem;height: 3.7rem;">
			<el-menu
				ref="menu"
				:default-active="defaultActive"
				class="el-menu-demo"
				mode="horizontal"
				background-color="#146AC1"
				text-color="#fff"
				active-text-color="#146ac1"
				router
			>
				<el-menu-item index="index">
					<img src="../assets/index/u12.png" alt="" class="images" />
					网站首页
				</el-menu-item>
				<el-menu-item index="geologyCity">
					<img src="../assets/index/u13.png" alt="" class="images" />
					城市地质
				</el-menu-item>
				<el-menu-item index="geothermy">
					<img src="../assets/index/u18.png" alt="" class="images" />
					地热资源
				</el-menu-item>
				<el-menu-item index="ocean">
					<img src="../assets/index/u17.png" alt="" class="images" />
					区域海洋
				</el-menu-item>
				<!-- <el-menu-item index="resources">
					<img src="../assets/index/ziyuan.png" alt="" class="images" />
					资源中心
				</el-menu-item> -->
				<el-menu-item index="monster">
					<img src="../assets/index/u16.png" alt="" class="images" />
					智能地图
				</el-menu-item>
				<el-menu-item index="drillAdmin">
					<img src="../assets/index/u14.png" alt="" class="images" />
					钻孔管理
				</el-menu-item>
				<el-menu-item index="realTime">
					<img src="../assets/index/book.png" alt="" class="images" />
					地质科普
				</el-menu-item>
				<el-menu-item index="download">
					<img src="../assets/index/u15.png" alt="" class="images" />
					下载中心
				</el-menu-item>
				<el-menu-item index="personal" v-if="!isLogin">
					<img src="../assets/index/my.png" alt="" class="images" />
					个人中心
				</el-menu-item>
			</el-menu>
		</div>
		<!-- 消息通知弹窗 -->
		<el-dialog title="消息通知" :visible.sync="messageDialog" width="40%" :before-close="handleClose">
			<div v-if="notification.length != 0">
				<div v-for="(item, index) in notification" :key="index">
					<el-row :gutter="20" class="p05 bb01">
						<el-col :span="4"><img style="width: 5rem; height: 5rem; border-radius: 5%;" src="@/assets/defaultImg.png" alt="" /></el-col>
						<el-col :span="20">
							<el-row :gutter="20" class="pt05">
								<el-col :span="17" class="fwb fz1">
									<span class="cp" @click="toAudit(item.id)">{{ item.title || noData }}</span>
								</el-col>
								<el-col :span="7">{{ item.sub_time || noData }}</el-col>
							</el-row>
							<el-row>
								<el-col :span="18" class="pt1">{{ item.name || noData }}</el-col>
								<el-col :span="6" class="pt1">
									<span @click="toAuditFlow(item.data_category, item.jiaose)" class="c14a cp">
										审核流程 (
										<span style="color: red;margin: 0 5px;">{{ item.content }}</span>
										)
									</span>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</div>
			</div>
			<div v-else style="text-align: center; vertical-align:bottom;">暂无通知</div>
		</el-dialog>
	</div>
</template>

<script>
import { getItem, removeItem } from '@/utils/storage.js';
import { auditNoticeCount, auditNotice } from '@/api/api.js';
export default {
	name: 'headers',
	data() {
		return {
			activeIndex: '1',
			username: '',
			headImg: '',
			isLogin: true,
			//姓名
			userName: '',
			value: null,
			//弹窗
			messageDialog: false,
			urlImg: '',
			notification: []
		};
	},
	created() {
		if (getItem('userInfo')) {
			this.isLogin = false;
			this.userName = getItem('userInfo').username;
			this.urlImg = this.url + '/public/uploads/20210521/e9c4d32213da76da9f1b90917b231654.png';
		} else {
			this.isLogin = true;
		}
		auditNoticeCount({ token: getItem('token') }).then(res => {
			if (res.code == 1001) {
				this.value = res.data;
			}
		});
	},
	mounted() {},
	computed: {
		//
		defaultActive() {
			return this.$route.path.replace('/', '');
		}
	},
	methods: {
		// 跳转登录
		logo() {
			this.$router.push({
				path: '/login'
			});
		},
		registerUser() {
			this.$router.push({
				path: '/registerUser'
			});
		},
		//消息通知
		messageList() {
			auditNotice({ token: getItem('token') }).then(res => {
				if (res.code == 1001) {
					this.messageDialog = true;
					this.notification = res.data;
				}
			});
		},
		//关闭弹窗
		handleClose() {
			this.messageDialog = false;
		},
		toAudit(val) {
			this.$router.push({
				path: '/auditAdmin',
				query: {
					id: val
				}
			});
		},
		//查看审核流程
		toAuditFlow(val, e) {
			console.log(e);
			//1提交员/2审核员
			this.messageDialog = false;
			if (e == 1) {
				if (val == 1) {
					this.$router.push({
						path: `/auditAdminSubmit?id=${val}`
					});
				} else if (val == 2) {
					this.$router.push({
						path: `/dxandtj?id=${val}`
					});
				} else if (val == 3) {
					this.$router.push({
						path: `/dxandtjs?id=${val}`
					});
				} else {
					this.$router.push({
						path: `/personalDataFile?id=${val}`
					});
				}
			} else {
				if (val == 1) {
					this.$router.push({
						path: `/zk?id=${val}`
					});
				} else if (val == 2) {
					this.$router.push({
						path: `/dxcp?id=${val}`
					});
				} else if (val == 3) {
					this.$router.push({
						path: `/tj?id=${val}`
					});
				} else {
					this.$router.push({
						path: `/zlda?id=${val}`
					});
				}
			}
		},
		//个人中心
		userInfo() {
			this.$router.push({
				path: '/personal'
			});
		},
		logout() {
			this.$confirm('是否要退出登录?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					removeItem('token');
					removeItem('userInfo');
					this.$router.push({
						path: '/login'
					});
				})
				.catch(() => {});
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
/deep/.el-menu.el-menu--horizontal {
	border: none;
}
.header {
	display: flex;
	align-items: center;
	width: 100%;
	// height: 9rem;
	background: url(../assets/index/dingbu.png) no-repeat;
	background-size: 100% 100%;
	.header-main {
		display: flex;
		height: 8.7rem;
		// justify-content: space-between;
		align-items: center;
		width: 63%;
		margin: 0 auto;
	}

	.header-main-logo {
		width: 3rem;
		height: 4rem;
	}
	.header-main-user {
		width: 60%;
		display: flex;
		// align-self: flex-end;
		align-items: center;
		justify-content: flex-end;
		height: 50%;
		margin-top: 1.5rem;
	}
	.header-main-user-i {
		// width: 4%;
		width: 2rem;
		height: 2rem;
		margin-right: 0.5rem;
		img {
			width: 100%;
			border-radius: 22rem;
		}
	}
	img {
		width: 100%;
		height: 100%;
	}
	.header-main-user-im {
		width: 1rem;
		height: 20%;
		margin-left: 20px;
		display: flex;
		align-items: center;
	}
	.header-main-user-l {
		font-size: 0.9rem;
	}
	.header-main-user-out {
		margin-left: 10px;
		height: 2rem;
		line-height: 2rem;
		color: 2b78fc;
		font-size: 1.1rem;
		cursor: pointer;
		display: flex;
	}
	.header-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 18px;
		color: #fff;
		padding: 0 18%;
		width: 64%;
		height: 51px;
		background-color: #0b2371;
	}
	.small {
		width: 3.31rem;
		height: 3.13rem;
		background-color: #00a9f2;
		border: solid 0.06rem #49c3ff;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		border-radius: 0.3rem;
		margin: 0 -0.8rem;

		img {
			width: 1.5rem;
			height: 1.5rem;
		}
		p {
			font-size: 0.68rem;
			color: #ffffff;
			margin: 0;
		}
	}
}
.el-menu--horizontal > .el-menu-item {
	// width: 9rem;
	border-bottom: none;
	height: 3rem;
	display: flex;
	align-items: center;
	// line-height: 3rem;
	text-align: center;
}
.el-menu--horizontal > .el-menu-item.is-active {
	border-bottom: none;
}
.el-menu {
	width: 100%;
	height: 3.7rem;
	text-align: center;
	// margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	// margin-left: 15rem;
	background-color: #146ac1;
	font-size: 0.14rem;
	color: #fff;
	.el-menu-item {
		height: 3.7rem;
		font-size: 18px;
		width: 9.82rem;
	}
	//设置选中el-menu-item时的样式
	.el-menu-item.is-active {
		height: 3.7rem;
		font-size: 18px;
		// width: 7rem;
		// border-left: #33a2ef solid 6px !important;
		background-color: #0355a8 !important;
		color: #fff !important;
	}

	.images {
		width: 1.5rem;
		height: 1.5rem;
		vertical-align: bottom;
		padding: 0 0.25rem 0 0.5rem;
		margin-right: 0.2rem;
	}
}
</style>
